<template>
  <div>
    <el-card v-if="purchase" class="purchase-card">
      <div slot="header" class="purchase-header">
        <span>{{ purchase.title }}</span>
        <span>（采购单号: {{ purchase_id }}）</span>
      </div>
      <p class="purchase-title">采购信息</p>
      <div class="purchase-view">
        <p>发布时间：{{ purchase.create_time | unixToDate }}</p>
        <p>截止时间：{{ purchase.closing_date | unixToDate }}</p>
        <p>期望收货时间：{{ purchase.receiving_date | unixToDate }}</p>
        <p>采购单状态：{{ purchase.status === 0 ? '开启' : '关闭' }}</p>
      </div>
      <p class="purchase-title">采购要求</p>
      <div class="purchase-view">
        <p>（采购）收货地：{{ `${purchase.ship_province}-${purchase.ship_city}-${purchase.ship_county}` }}</p>
        <p>（供应）发货地：{{ `${purchase.seller_province}-${purchase.seller_city}-${purchase.seller_county}` }}</p>
        <p>发票要求：{{ purchase.need_receipt === 0 ? '无需发票' : '需要发票' }}</p>
      </div>
      <p class="purchase-title">联系方式</p>
      <div class="purchase-view">
        <p>联系人：{{ purchase.contact_name }}</p>
        <p>联系电话：{{ purchase.contact_num }}</p>
      </div>
      <p class="purchase-title">采购商品</p>
      <el-table :data="[purchase]">
        <el-table-column label="商品名称" prop="goods_names" />
        <el-table-column label="商品规格" prop="goods_sku" />
        <el-table-column label="采购数量">
          <template slot-scope="{ row }">
            <span>{{ row.goods_num + row.goods_unit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="采购单价">
          <template slot-scope="{ row }">
            <span>{{ row.goods_price | unitPrice('￥') }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="purchase-view">
        <p>补充说明：{{ purchase.purchase_explain || '无' }}</p>
      </div>
    </el-card>
    <el-card v-if="quotation" class="quotations-card">
      <div slot="header" class="quotations-header">
        <span>我的报价单</span>
      </div>
      <p class="purchase-title">报价信息</p>
      <div class="purchase-view">
        <p>报价标题：{{ quotation.quotation_title }}</p>
        <p>报价公司：{{ quotation.company }}</p>
        <p>报价时间：{{ quotation.create_time | unixToDate }}</p>
        <p>报价数量：{{ quotation.goods_num || ''}}</p>
        <p>报价单位：{{ quotation.goods_unit || ''}}</p>
        <p>报价说明：{{ quotation.quotation_detail }}</p>
        <p>报价附件：<a :href="quotation.quotation_file">下载</a></p>
        <p>联系人：{{ quotation.contact_name }}</p>
        <p>联系电话：{{ quotation.contact_number }}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as API_Purchase from '@/api/purchase'
export default {
  name: 'quotationsDetail',
  data() {
    return {
      purchase_id: '',
      purchase: '',
      quotation_id: '',
      quotation: ''
    }
  },
  mounted() {
    const { quotation_id, purchase_id } = this.$route.query
    this.purchase_id = purchase_id
    this.quotation_id = quotation_id
    this.GET_PurchaseDetail()
    this.GET_QuotationDetail()
  },
  methods: {
    /**
     * 获取采购单详情
     * @returns {Promise<void>}
     * @constructor
     */
    async GET_PurchaseDetail() {
      const res = await API_Purchase.getPurchaseDetail(this.purchase_id)
      this.purchase = res
    },
    /**
     * 获取报价单详情
     * @returns {Promise<void>}
     * @constructor
     */
    async GET_QuotationDetail() {
      const res = await API_Purchase.getQuotationsDetail(this.quotation_id)
      this.quotation = res
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.purchase-card {
  font-size: 14px;
  .purchase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
.quotations-card {
  margin-top: 10px;
}
.purchase-title {
  position: relative;
  padding-left: 15px;
  margin: 0;
  &::before {
    content: ' ';
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: #EC4515;
    border-radius: 2px;
  }
}
.purchase-view {
  padding-left: 15px;
}
</style>